<template>
  <div>{{count}}</div>
  <div>{{person.age}}</div>
  <div>{{comStr}}</div>
  <button @click="addCount">addCount</button>
  <button @click="addAge">addAge</button>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, computed, watch,watchEffect,
onBeforeUpdate,onUpdated,onUnmounted,onBeforeUnmount } from "vue";
export default defineComponent({
  name: "test",
  setup(props) {
    var count = ref(0);
    var person = reactive({ name: "张三", age: 11 });
    var addCount = () => {
      count.value++;
    };
    var addAge = () => {
      person.age++;
    };
    var comStr: string = computed(function() {
      return count.value + " - " + person.age;
    });
    watchEffect(() => console.log('count.value',count.value))
    watch(person,function() {
    });

    onBeforeUpdate(()=>{
      console.log(`onBeforeUpdate`)
    })
    onUpdated(()=>{
      console.log(`onUpdated`)
    })
    onUnmounted(()=>{
      console.log(`onUnmounted`)
    })
    onBeforeUnmount(()=>{
      console.log(`onBeforeUnmount`)
    })
    return {
      count,
      addCount,
      addAge,
      person,
      comStr
    };
  }
});
</script>
<style>
</style>
